!<template>
    <div>
        <!-- 头部导航区 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>角色管理</el-breadcrumb-item>
        <el-breadcrumb-item>角色列表</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card>

            <!-- 添加角色按钮区  -->
            <el-row>
                <el-col>
                    <el-button type="primary">
                        添加角色
                    </el-button>
                </el-col>
            </el-row>

            <el-table :data="roleList" border stripe>


                <!-- 展开列 -->
                <!-- type="expand" :代表这列是展开列 -->
                <el-table-column  type="expand" label="">
                    <template slot-scope="scope">
                        
                        <el-row  
                            v-for="(item1,il) in scope.row.children"
                            :key="item1.id"
                            :class="['bdbottom','vcenter',il === 0 ? 'bdtop' :'']"
                            
                        >
                            <!-- 渲染一级权限:订单管理之类的 -->
                            <el-col 
                                :span="5"
                                style="text-align: left "
                            >
                                <el-tag 
                                    closable
                                    @close="removeRightById(scope.row,item1.id)"
                                >{{item1.authName}}</el-tag>
                                <i class="el-icon-caret-right"></i>
                            </el-col>

                            <!-- 渲染二级和三级权限 -->
                            <el-col :span="19">

                                <!-- 通过for循环嵌套渲染二级权限列 -->
                                <el-row 
                                    v-for="(item2,i2) in item1.children" 
                                    :key="item2.id"
                                    :class="['vcenter',i2 ===0 ? '' : 'bdtop']"
                                    style="text-align: left"
                                >

                                    <!-- 二级权限:商品列表之类的 -->
                                    <el-col :span="6">
                                        <el-tag type="success"
                                            closable
                                            @close="removeRightById(scope.row,item2.id)"
                                        >{{item2.authName}}</el-tag>
                                        <i class="el-icon-caret-right"></i>
                                    </el-col>


                                    <!-- 三级权限 -->
                                    <el-col :span="18">
                                        <el-tag type="warning"
                                            v-for="(item3) in item2.children"
                                            :key="item3.id"
                                            closable
                                            @close="removeRightById(scope.row,item3.id)"
                                        >{{item3.authName}}</el-tag>
                                    </el-col>

                                </el-row>

                            </el-col>
                        </el-row>
                            <!-- <pre>
                                {{scope.row}}
                            </pre> -->
                    </template>
                </el-table-column>


                <el-table-column  type="index" label="#">
                </el-table-column>

                <el-table-column
                    prop="roleName"
                    label="角色名称"
                >
                </el-table-column>

                <el-table-column
                    prop="roleDesc"
                    label="角色描述"
                >
                </el-table-column>

                <el-table-column
                    label="操作"
                    width="300px"
                >
                    <template 
                        slot-scope="scope"
                    >
                        <el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
                        <el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
                        <el-button size="mini" type="warning" icon="el-icon-setting"
                            @click="showSetRightDialog(scope.row)"
                        >分配权限</el-button>
                    </template>
                </el-table-column>

            </el-table>
            
        </el-card>


        <!-- 分配权限的对话框 -->
        <el-dialog
            title="分配权限"
            :visible.sync="setRightDialogVisible"
            width="50%"
            @close="setRightDialogClosed"
        >
        
            <!-- 树形控件 -->
            <!-- default-checked-keys:默认展开的节点的 key 的数组 -->
            <el-tree 
                :data="rightsList" 
                :props="treeProps" 
                show-checkbox
                node-key="id"
                default-expand-all
                :default-checked-keys="defKeys"
                ref="treeRef"
            ></el-tree>


            <span slot="footer" class="dialog-footer">
                <el-button @click="setRightDialogVisible = false">取 消</el-button>
                <el-button type="primary"  @click="allotRights() ">确 定</el-button>
            </span>

        </el-dialog>




    </div>
</template>

<script>
    export default {
        data() {
            return {
                //所有角色列表数据
                roleList:[],

                //控制分配权限对话框的显示与隐藏
                setRightDialogVisible:false,

                //所有的权限列表
                rightsList:[],

                //树形控件的属性绑定对象
                treeProps: {
                    children: 'children',
                    // 文本名称
                    label: 'authName'  
                },

                //默认选中的节点
                defKeys:[],

                //用于给角色授权接口使用的id
                roleId:"",


            }
        },

        created() {
            this.getRolesList();
        },

        methods: {
            //获取所有角色列表
             async getRolesList(){
                const {data:res} =  await this.$http.get("roles");

                if(res.meta.status !==200){
                   return this.$message.error("获取角色列表失败");
                }

                //把后台数据赋值给roleList,roleList绑定在模板上的
                this.roleList = res.data;
                // console.log(this.roleList);
            },

            //根据Id删除对应的权限
            async removeRightById(role,rightId){

                // console.log(role,rightId);

                const  confirmResult = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).catch((err) => {
                    return err ;         
                });


                // console.log(confirmResult);//confirm或cancel

                if(confirmResult !== 'confirm'){
                   return this.$message.info("已经取消删除");
                }

                
               const {data:res} = await this.$http.delete("roles/"+role.id+"/rights/"+rightId);
            //    console.log(res);
                if(res.meta.status !== 200){
                    return this.$message.error("权限删除失败");
                }
                this.$message.info("权限删除成功");
                // this.getRolesList();//会重新刷新页面,不建议这样做
                role.children = res.data; //把最新的数据给这个角色的权限


            },

            //显示分配权限的方法
            async showSetRightDialog(role){

                //给分配权限使用的Id
                this.roleId = role.id;

                //获取所有权限的数据
                const {data:res}= await this.$http.get("rights/tree");
                // console.log(res);
                if(res.meta.status !== 200){
                    return this.$message.error("获取权限数据失败");
                }

                //获取到的权限数据保存到data中
                this.rightsList =  res.data;

                //调用函数选中角色有的权限,(role是通过页面加载的时候后台
                // 访问出来的所有角色和角色权限,再渲染到模板上的)
                this.getLeafKeys(role,this.defKeys);

                this.setRightDialogVisible = true;
            },


            //通过递归的形式,获取角色下所有三级权限的id,保存到
            // defKeys数组中
            getLeafKeys(node,arr){
                //如果当前node节点不包含children属性,则是三级节点
                if(!node.children){
                    return arr.push(node.id);
                }

                //通过递归循环getLeafKeys函数,把所有的
                node.children.forEach(item => {
                    this.getLeafKeys (item,arr) 
                });

            },


            //监听分配权限对话框的关闭事件
            setRightDialogClosed(){

                this.defKeys=[];//不清空id会重复
            },


            //点击击树形控件的确定按钮为角色分配权限
            async allotRights(){

                //拿到树形控件选中和办选中的节点id
                //getCheckedKeys和getHalfCheckedKeys是树形控件自带的方法
                const keys = [
                    ...this.$refs.treeRef.getCheckedKeys(),
                    ...this.$refs.treeRef.getHalfCheckedKeys()
                ];

                // console.log(keys);
                const idStr = keys.join(",");
                // console.log(idStr,this.roleId);

                //roleId是在showSetRightDialog函数获取到的
                const {data:res} = await this.$http.post(`roles/${this.roleId}/rights`,{rids:idStr});
                // console.log(res);

                if(res.meta.status !==200){
                    return this.$message.error("更新权限列表失败");
                }

                this.$message.success("更新权限列表成功");
                this.getRolesList();
                this.setRightDialogVisible =false;
            },




        },


    }
</script>

<style lang="less" scoped>

.el-tag{
    margin: 7px;
}

.bdtop{
    border-top: 1px solid #eee;
}

.bdbottom{
    border-top: 1px solid #eee;
}

// 设置纵向居中对齐
.vcenter{
    display: flex;
    align-items: center;
}


</style>